import { Cards, Card, Tabs } from 'nextra/components'
import BadgeGroup, { UniverTypes } from '@/components/BadgeGroup'

# Quickstart

<BadgeGroup values={[UniverTypes.SHEET, UniverTypes.DOC]} value={UniverTypes.DOC} />

If you want to get started with Univer as quickly as possible, you've come to the right place! This page will guide you through building a working Univer app in just a few minutes.

## Play Online

You can play with Univer online without installing anything. Just click the link below and start using Univer right away.

<Cards>
  <Card
    icon="📝"
    title={<span className="">Univer Doc<sup>Beta</sup></span>}
    href="https://stackblitz.com/~/github.com/awesome-univer/docs-vite-demo"
  />
</Cards>

## Starter Kit

If you prefer to start with a local development environment, you can use the following starter kits to create a new Univer app in just a few seconds.

<Tabs items={['pnpm', 'npm']}>
  <Tabs.Tab label="pnpm">
    ```shell
    pnpm dlx degit dream-num/univer-doc-start-kit [your-app-name]
    ```
  </Tabs.Tab>
  <Tabs.Tab label="npm">
    ```shell
    npx degit dream-num/univer-doc-start-kit [your-app-name]
    ```
  </Tabs.Tab>
</Tabs>

Great job on your first steps with Univer! You've successfully created your first project and gotten a taste of what Univer can do.

{/* ## Next Steps

Congratulations on making it this far! You're well on your way to mastering Univer. Here are some next steps to help you continue your journey:

- **🔰 Installation & Usage**: If you want to learn how to manually set up a Univer project from scratch, check out the [Installation & Usage](/guides/doc/getting-started/installation) chapter. It will guide you through the process step by step.
- **🏗️ Advanced Usage**: Ready to take your Univer skills to the next level? The [Advanced Usage](/guides/doc/advanced/univer-plugins) chapter covers more advanced topics and techniques for working with Univer.
- **📚 Tutorials**: Looking for practical examples and real-world use cases? Head over to the [Tutorials](/guides/tutorials/csv-import-plugin) chapter, where you'll find a collection of hands-on tutorials that demonstrate how to build various applications and features with Univer.
- **🧱 Concepts & Architecture**: Want to dive deep into the inner workings of Univer? The [Concepts & Architecture](/guides/concepts-and-architecture/architecture/) chapter provides a comprehensive overview of Univer's architecture, core concepts, and design principles.
- **🪄 Customizing Univer**: Interested in extending and customizing Univer to fit your specific needs? The [Customizing Univer](/guides/customization) chapter is your go-to resource for learning how to create custom plugins, themes, and extensions.
- **🎢 Playground**: Don't forget to explore the [Playground page](/playground), where you can experiment with various Univer demos and see the library in action.

No matter which path you choose, Univer is here to support you every step of the way. Happy coding! */}
